<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue";
import {showFailToast, showSuccessToast, showToast} from "vant";
import myAxios from "../plugins/myAxios";

const router = useRouter();
//  展示日期选择器
let showPicker = ref(false);

const initFormData = {
  name: "",
  description: "",
  expireTime: "",
  maxNum: 3,
  password: "",
  status: 0,
}


//  需要用户填写的表单数据
const addTeamData = ref({...initFormData});

//  提交
const onSubmit = async () => {
  console.log(addTeamData.value)
  const postData = {
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }
  const res = await myAxios.post("/team/add", postData);
  if (res?.code === 0 && res.data) {
    showSuccessToast('添加成功');
    router.push({
      path: '/team',
      replace: true,
    });
  } else {
    showFailToast('添加失败');
  }
}

//过期时间
const onConfirm = () => {
  initFormData.expireTime = `${currentDate.value.join('-')} ${currentTime.value.join(':')}`
  showPicker = false;
};

const currentDate = ref(['2022', '06', '01']);
const currentTime = ref(['12', '00']);
const minDate = new Date(2020, 0, 1)
const maxDate = new Date(2025, 5, 1)

</script>

<template id="teamAddPage">
  <div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.name"
            name="name"
            label="队伍名"
            placeholder="请输入队伍名"
            :rules="[{ required: true, message: '请填写队伍名' }]"
        />
        <van-field
            v-model="addTeamData.description"
            rows="4"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />

        <van-field
            is-link
            readonly
            name="datePicker"
            label="过期时间"
            v-model="addTeamData.expireTime"
            :placeholder="addTeamData.expireTime != '' ? addTeamData.expireTime : '点击选择过期时间'"
            @click="showPicker = true"
        />
        <van-picker-group
            title="过期时间"
            :tabs="['选择日期', '选择时间']"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            v-show="showPicker"
        >
          <van-date-picker
              v-model="currentDate"
              :min-date="minDate"
              :max-date="maxDate"
          />
          <van-time-picker v-model="currentTime" />
        </van-picker-group>

        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-slider v-model="addTeamData.maxNum" max="10" min="3"/>
            <span style="margin-left: 15px">{{ addTeamData.maxNum }}</span>
          </template>
        </van-field>
        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="Number(addTeamData.status)===2"
            v-model="addTeamData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入队伍密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>